<#include "/common/_layout.html"/>
<@layout>
	<style>
		.title {
			margin: 0;
			padding: 20px 0;
		}
		
		#app {
			padding: 0 20px;
		}
	</style>
	<div id="app">
		<h3 class="title">{{moduleName}}</h3>
		<el-form ref="form" :inline="true" :model="search" label-width="100px">
			<el-form-item label="商品品牌" prop="goods_brand">
				<el-select v-model="search.goods_brand" placeholder="请选择">
					<el-option v-for="item in brand" :key="item.id" :label="item.brand_name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="商品类型" prop="goods_type">
				<el-select v-model="search.goods_type" placeholder="请选择">
					<el-option v-for="item in type" :key="item.id" :label="item.type_name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="商品规格" prop="goods_spec">
				<el-input v-model.trim="search.goods_spec"></el-input>
			</el-form-item>
			<el-button type="primary" icon="plus" @click="queryList(1)">搜索</el-button>
		</el-form>

		<el-row>
			<el-button type="primary" icon="plus" @click="addGoodsDialog.dialogVisible = true">添加</el-button>
		</el-row>
		<el-table ref="table" :data="tableData" border style="margin-top: 10px;" v-loading="loading" element-loading-text="拼命加载中">
			<el-table-column prop="brand_name" label="品牌" align='center' width="250">
			</el-table-column>
			<el-table-column prop="type_name" label="类型" align='center' width="150">
			</el-table-column>
			<el-table-column prop="goods_spec" label="型号" align='center'>
			</el-table-column>
			<el-table-column prop="goodsStores" label="库存情况" align='center' width="120">
				<template scope="scope">
					<div v-if="scope.row.goodsStores">
						<p v-for="(item, index) in scope.row.goodsStores">{{item.name}}：{{item.num}}</p>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="warning_value" label="库存预警" align='center' width="80">
			</el-table-column>
			<el-table-column prop="goods_price" label="单价" align='center' width="120">
			</el-table-column>
			<el-table-column prop="status" label="状态" align='center' width="90">
				<template scope="scope">
					<el-tag v-if="scope.row.status == '0'" type="success">正常</el-tag>
					<el-tag v-else-if="scope.row.status == '1'" type="danger">已废弃</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" align='center' align='center' width="150" fixed="right">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
					<el-button v-if="scope.row.status == '0'" size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">废弃</el-button>
					<el-button v-if="scope.row.status == '1'" size="small" type="primary" @click="handlePrimary(scope.$index, scope.row)">恢复</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination style="margin-top: 10px;" ref="pagination" :total="pagination.total" :current-page="pagination.currentPage" :page-size="pagination.pageSize" :page-sizes="[10, 20]" @size-change="handlePageSizeChange" @current-change="handlePageCurrentChange" layout="prev, pager, next, total, sizes">
		</el-pagination>

		<el-dialog title="添加商品信息" fullscreen="true" :visible="addGoodsDialog.dialogVisible" @open="onOpen('addGoodsDialog','${ctx}/goods/addGoods')" @close="onClose('addGoodsDialog')" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
			<iframe id="addGoodsDialog" :src="addGoodsDialog.url" :height="height" frameborder="0" style="margin: 0; padding: 0px; overflow: hidden; width: 100%;" scroll="no"></iframe>
		</el-dialog>
		<el-dialog title="修改商品信息" fullscreen="true" :visible="editGoodsDialog.dialogVisible" @open="onOpen('editGoodsDialog','${ctx}/goods/editGoods')" @close="onClose('editGoodsDialog')" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
			<iframe id="editGoodsDialog" :src="editGoodsDialog.url" :height="height" frameborder="0" style="margin: 0; padding: 0px; overflow: hidden; width: 100%;" scroll="no"></iframe>
		</el-dialog>

		<el-dialog title="选择商品" width="90%" :visible="selectGoodsDialog.dialogVisible" @open="onOpen('selectGoodsDialog','${ctx}/goods/selectGoods')" @close="onClose('selectGoodsDialog')" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
			<iframe id="selectGoodsDialog" :src="selectGoodsDialog.url" frameborder="0" style="margin: 0; padding: 0px; overflow: hidden; height: 550px;width: 100%;" scroll="no"></iframe>
		</el-dialog>
	</div>

	<script type="text/javascript">
		var selectData;
		var _vue = new Vue({
			el: '#app',
			data: function() {
				return {
					height: 100,
					search: {
						goods_spec: "",
						goods_brand: "",
						goods_type: ""
					},
					brand: eval('${brand}'),
					type: eval('${type}'),
					store: eval('${store}'),
					moduleName: "商品管理",
					loading: true,
					tableData: [],
					pagination: {
						total: 0,
						pageSize: 10,
						currentPage: 1
					},
					addGoodsDialog: {
						dialogVisible: false,
						url: ""
					},
					editGoodsDialog: {
						dialogVisible: false,
						url: ""
					},
					selectGoodsDialog: {
						dialogVisible: false,
						url: ""
					}
				}
			},
			methods: $.extend(commonMethods, {
				handleEdit: function(index, row) {
					selectData = row;
					this.editGoodsDialog.dialogVisible = true;
				},
				handleDelete: function(index, row) {
					selectData = row;
					var h = this.$createElement;
					var content = h('p', null, [
						h('span', null, '确认废弃'),
						h('i', {
							style: 'color: red'
						}, row.goods_spec), h('span', null, '?')
					]);
					this.$confirm(content, "提示", {
						type: 'warning',
						callback: function(action, instance) {
							if(action == "confirm") {
								$.ajax({
									url: "${ctx}/goods/delete",
									type: "POST",
									cache: false,
									data: {
										"id": row.id
									},
									success: function(data) {
										_vue.loading = false;
										queryList();
									},
									error: function(xhr, msg, e) {},
									complete: function() {
										_vue.loading = false;
									}
								});
							}
						}
					});
				},
				handlePrimary: function(index, row) {
					selectData = row;
					$.ajax({
						url: "${ctx}/goods/recovery",
						type: "POST",
						cache: false,
						data: {
							"id": row.id
						},
						success: function(data) {
							_vue.loading = false;
							queryList();
						},
						error: function(xhr, msg, e) {},
						complete: function() {
							_vue.loading = false;
						}
					});
				}
			}),
			mounted: function() {
				this.height = document.documentElement.clientHeight - 120;
				// 初始请求数据
				queryList.call(this);
			}
		});

		function queryList(currentPage) {
			_vue ? "" : _vue = this;
			_vue.loading = true;
			if(currentPage){
				_vue.$refs.pagination.internalCurrentPage = currentPage;
			}
			$.ajax({
				url: "${ctx}/goods/list",
				type: "POST",
				cache: false,
				data: {
					goods_spec: _vue.search.goods_spec,
					goods_brand: _vue.search.goods_brand,
					goods_type: _vue.search.goods_type,
					cpage: currentPage || _vue.$refs.pagination.internalCurrentPage,
					pagesize: _vue.$refs.pagination.internalPageSize
				},
				success: function(data) {
					_vue.loading = false;
					_vue.tableData = data.result.list;
					_vue.pagination.total = data.result.totalRow;
					_vue.pagination.pageSize = data.result.pageSize;
				},
				error: function(xhr, msg, e) {},
				complete: function() {
					_vue.loading = false;
				}
			});
		}
	</script>
</@layout>